<template>
  <!-- 富文本容器 -->
  <div ref="editor" style="text-align:left"></div>
</template>
<script>
import E from 'wangeditor' // 富文本编辑器
import { upload } from '@/api'
export default {
  name: 'RichTextEditor',
  props: ['content'],
  data () {
    return {
      editorContent: ''
    }
  },
  mounted () {
    // 操作DOM初始化富文本编辑器
    // this.$refs.editor就是编辑器容器的DOM节点
    var editor = new E(this.$refs.editor)
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = ''
    // 自定义上传图片事件
    editor.customConfig.customUploadImg = async (files, insert) => {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      const { data, meta } = await upload(files)
      if (meta.status === 200) {
        insert(`http://localhost:8888/${data.tmp_path}`)
      }
      // 上传代码返回结果之后，将图片插入到编辑器中
      // 调用该方法，会生成img标签，src指向传递的imgUrl
      // imgUrl是上传到服务器的服务器端图片访问路径，一个web访问路径
      // insert(imgUrl)
    }
    // // 自定义fileName
    // editor.customConfig.uploadFileName = 'file'
    // // 配置请求上传自定义请求头：添加token
    // editor.customConfig.uploadImgHeaders = {
    //   Authorization: getToken()
    // }
    // 当编辑器内容发生改变的时候，将数据同步到了Vue组件中的formData.goods_introduce中了
    editor.customConfig.onchange = (html) => {
      // 发布自定义事件，可以传参

      // 这里必须是发布 update:props属性名 事件
      this.$emit('update:content', html)
      // this.$emit('editor-change', html)
      // this.editorContent = html
    }
    // 创建生成
    editor.create()
  }
}
</script>
<style scoped>
</style>
